//里面的tab切换
import React, { useState } from 'react'
import './index.css'
const Index: React.FC = () => {
    const [activeTab, setActiveTab] = useState<number>(0);
    const TabButton: React.FC<{ active: boolean; onClick: () => void; children: React.ReactNode }> = ({ active, onClick, children }) => (
        <button
            onClick={onClick}
            style={{
                padding: '10px 20px',
                backgroundColor: 'white',
                border: 'none',
                borderBottom: active ? '2px solid #0773fc' : '2px solid white',
                color: active ? '#1b2337' : '#505a71',
                fontWeight: active ? '800' : '200',
                margin: '0 5px',
            }}
        >
            {children}
        </button>
    );
    return (
        <div>
            <div style={{ marginBottom: '10px' }}>
                <TabButton active={activeTab === 0} onClick={() => setActiveTab(0)}>全部</TabButton>
                <TabButton active={activeTab === 1} onClick={() => setActiveTab(1)}>智能设计</TabButton>
                <TabButton active={activeTab === 2} onClick={() => setActiveTab(2)}>海报</TabButton>
            </div>
            <div>
                {activeTab === 0 && <div className='zdytabnei'>
                    <div className='zdytabnei1'>
                        <p><span>16:9</span></p>
                        <p>1366×768px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>16:9</span></p>
                        <p>1280×720px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>16:9</span></p>
                        <p>1440×900px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>16:9</span></p>
                        <p>1920×1080px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>4:3</span></p>
                        <p>1024×768px</p>
                    </div>
                </div>}
                {activeTab === 1 && <div className='zdytabnei'>
                    <div className='zdytabnei1'>
                        <p><span>Iphone X</span></p>
                        <p>1242×2208px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>Iphone 7</span></p>
                        <p>750×1334px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>Android</span></p>
                        <p>1080×1920px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>Kindle</span></p>
                        <p>789×1024px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>Ipad Pro</span></p>
                        <p>2048×2732px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>Ipad</span></p>
                        <p>1536×2048px</p>
                    </div>
                </div>}
                {activeTab === 2 && <div className='zdytabnei'>
                    <div className='zdytabnei1'>
                        <p><span>A2</span></p>
                        <p>42×59px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>A3</span></p>
                        <p>30×42px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>A4</span></p>
                        <p>21×30px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>A5</span></p>
                        <p>15×21px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>B3</span></p>
                        <p>35×50px</p>
                    </div>
                    <div className='zdytabnei1'>
                        <p><span>B4</span></p>
                        <p>25×35px</p>
                    </div>
                </div>}

            </div>
        </div>
    )
}

export default Index